<template>
	<view class="layout">
		<view class="head">
			<view class="title">
			{{title}}<text class="required">*</text>
			</view>
			<text class="subTitle">
				请先选择出行日期，再选择上车时间范围。
			</text>
		</view>
		
		<view class="body">
			<view class="date">
				<picker mode="date" :value="date" :start="mix_data"  @change="bindDateChange">
					<view class="show">{{date|| '开始日期'}}</view>
				</picker>			
			</view>
			<view class="time">
				<text class="separator">从</text>
				<view class="start">
					<picker mode="time" :value="start_time" :start="mix_start_time" @change="bindStartTimeChange">
						<view class="uni-input">{{start_time || '起始时间'}}</view>
					</picker>
				</view>
				<text class="separator">至</text>
				<view class="end">
					<picker mode="time" :value="end_time" :start="start_time" @change="bindEndTimeChange">
						<view class="uni-input">{{end_time || '起始时间'}}</view>
					</picker>
				</view>			
				<text class="separator">出发</text>
			</view>

		
		</view>
		
	</view>
</template>

<script setup>
	import {ref} from 'vue';
	import {compareDates, getCurrent, showToast} from '../../utils/common.js'
	defineProps({
		title: {
			type: String,
			default: "时间"
		}
	})
	
	const emit = defineEmits(["selectDate", "selectStartTime", "selectEndTime"])
	
	const date = ref(getCurrent('date'))
	const mix_data = ref(getCurrent('date'))
	
	const start_time = ref(getCurrent('time'))
	const mix_start_time = ref(getCurrent('date'))
	
	const end_time = ref(getCurrent('time'))
	
	
	const bindDateChange = (e)=>{
		// let input_date = e.detail.value		
		// if(!compareDates(input_date, date.value)){
		// 	showToast('不能选择历史日期',"none",false)
		// }
		date.value = e.detail.value
		emit("selectDate", date.value)
	}
	
	const bindStartTimeChange = (e)=>{
		start_time.value = e.detail.value	
		emit("selectStartTime", start_time.value)
	}
	
	const bindEndTimeChange = (e)=>{
		end_time.value = e.detail.value	
		emit("selectEndTime", end_time.value)
	}


</script>

<style lang="scss" scoped>
.layout{
	.head {
		// padding: 20rpx 0;
		.title {
			font-size: 34rpx;
			padding-left: 20rpx;
			position: relative;
			padding-bottom: 6rpx;
			.required{
				color: #f00;
				margin-left: 4rpx;
			}
			&::before {
				content: "";
				display: block;
				width: 8rpx;
				height: 30rpx;
				background: $brand-theme-color;
				position: absolute;
				left: 0;
				top: calc(50% - 15rpx);
				border-radius: 10rpx;
			}
		}
		.subTitle{
			margin-left: 20rpx;
			font-size: 26rpx;
			color:$text-font-color-3;
		}
	}
	.body{
		width: 640rpx;		
		height: 80rpx;
		margin-left: 20rpx;
		padding: 5rpx 10rpx 5rpx 0;
		border-radius: 10rpx;
		font-size: $text-font-size-input;
		font-weight: 400;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.date{
			background: #f3f3f3;
			
			padding: 10rpx 10rpx;
			border-radius: 10rpx;
			white-space: nowrap;
			border: 1rpx solid #70708a;
			width: 200rpx;
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.time{	
			padding: 10rpx 10rpx;
			display: flex;
			justify-content:center; 
			align-items: center;
			height: 60rpx;
			.start{
				background: #f3f3f3;
				padding: 10rpx 10rpx;
				border-radius: 10rpx;
				border: 1rpx solid #70708a;
				white-space: nowrap;
			}
			.separator{
				padding: 0 10rpx;
				white-space: nowrap;
			}
			.end{
				background: #f3f3f3;
				padding: 10rpx 15rpx;
				border-radius: 10rpx;
				border: 1rpx solid #70708a;
				white-space: nowrap;
			}
		}
	}
}
</style>